<template>
	<div class="login-btn" :ref="sName" @mouseenter="hover(sName, true)" @mouseleave="hover(sName, false)">
		<router-link to="/login" target="_blank" class="user-img">
			<div class="user-header border"><img :src="userImg" /></div>
		</router-link>
		<router-link to="/login" target="_blank" class="login-text">登录</router-link>
		<router-link to="" class="reg-text">注册</router-link>
	</div>
</template>

<script>
export default{
	data(){
		return{
			// 默认头像
			img: require('../../../public/image/aKari.jpg'),
			sName: 'unLogin'
		}
	},
	computed:{
		// 用户头像或默认头像
		userImg(){
			return this.$store.state.users.userImg || this.img;
		}
	},
	methods:{
		// 移入显示浮窗移出隐藏
		hover(name, show){
			if(!name) return;
			this.$store.commit('pops/setPopsShow', {name, show})
		},
		// 根据元素设置起始位置，这里获取了所有有ref属性的元素
		getPosi(name){
			let target = this.$refs[name];
			this.$store.commit('pops/getComputedPosi', {name, target})
		}
	},
	mounted(){
		this.getPosi(this.sName);
	}
}
</script>

<style lang="less" scoped>
.login-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	.user-img{
		display: inline-block;
		width: 32px;
		height: 32px;
		margin-left: 12px;
		font-size: 14px;
		.border{
			border: 1px solid #c0c0c0;
			box-sizing: border-box;
		}
	}
	.login-text{
		margin-left: 5px;
		line-height: 36px;
		font-size: 14px;
	}
	.reg-text{
		margin-left: 12px;
		line-height: 36px;
		font-size: 14px;
	}
	
}
</style>
